<template>
	<view class="con">
		<view class="top">
			<view class="topSearch">
				<u-search :showAction="true" v-model="product_name" actionText="搜索" placeholder="输入商品名称、品牌、型号" @custom="onSearch"></u-search>
			</view>
			<view class="searchDiv" v-if="isSearch">
				<view class="searchli" v-show="issearchProductlst">
					<view class="searchlitop diFlex">
						<view class="searchlitopleft">历史搜索</view>
						<view class="searchlitopright diFlex" @click="getclearSearchHistory">
							<u-icon name="trash" color="#c0c0c0" size="14"></u-icon>
							<text>清空</text>
						</view>
					</view>
					<view class="scont">
						<view class="scontli" @click="onSearchli(v.search_key)" v-for="(v,i) in searchProductlst">{{v.search_key}}</view>
						
					</view>
				</view>
				<view class="searchli">
					<view class="searchlitop diFlex">
						<view class="searchlitopleft">热门搜索</view>
						<view class="searchlitopright"></view>
					</view>
					<view class="scont">
						<view class="scontli" @click="onSearchli(v.search_key)" v-for="(v,i) in searchHotlst">{{v.search_key}}</view>
					</view>
				</view>
			</view>
			<view class="topbot" v-else>
				<block  v-for="(item,index) in changeList">
					<view v-if="item.id == 3" :class="['topbotli diFlex', tabindex === item.id ? 'oncolor': '']" @click="togglePriceSort">
						<text>{{item.title}}</text>
						<view style="width: 10px;padding-left: 2px;">
							<u-icon name="arrow-up"  :color="priceSortOrder === '1' ? 'red' : '#c0c0c0'" size="10"></u-icon>
							<u-icon name="arrow-down" :color="priceSortOrder === '2' ? 'red' : '#c0c0c0'" size="10"></u-icon>
						</view>
					</view>
					<view class="topbotli" style="display: flex;align-items: center;" v-else-if="item.id == 5" @click="changeStatus(item)">
						<image v-if="isGoodssort" class="imgw16" src="https://img-cdn.duobashuzi.com/xianggui/img/shop_01.png"></image>
						<image v-else class="imgw16" src="https://img-cdn.duobashuzi.com/xianggui/img/shop_02.png"></image>
					</view>
					<view v-else :class="['topbotli', tabindex === item.id ? 'oncolor': '']" @click="changeStatus(item)">{{item.title}}</view>
					
				</block>
			</view>
		</view>
		<block v-if="!isSearch">
			<view class="zhanwei"></view>
			<view class="goods" v-if="isGoodssort" >
				<view class="goodsli" v-for="(v,i) in goodsList" >
					<view class="goodsImg" @click="jump(v.id,v.product_name)">
						<image :src="v.preview_img" mode="aspectFit"></image>
					</view>
					<view class="goodstext" @click="jump(v.id,v.product_name)">{{v.product_name}}</view>
					<view class="gw95" v-if="v.is_user_member == 0">
						<text class="discount red">{{v.goods_price_msg}}</text>
					</view>
					<view class="gw95" v-else-if="v.is_user_member > 0">
						<text class="hyj" v-if="v.goods_price_msg">{{v.goods_price_msg}}</text>
					</view>
					<view class="gw95" v-if="v.ranking !=''">
						<text class="discount red">{{v.ranking}}</text>
					</view>
					<view class="goodsprice diFlex">
						<view class="goodspricetext">
							￥{{v.product_shop_price}}
						</view>
						<view class="buy" @click="onGwc(v)">
							<image src="https://img-cdn.duobashuzi.com/xianggui/img/gwc_h.png" mode="scaleToFill"></image>
							<text class="num" v-if="v.mum">{{v.mum}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="sgoods" v-else>
				<view class="sgoodsli" v-for="(v,i) in goodsList"  @click="jump(v.id,v.product_name)">
					<view class="sgoodsImg" @click="jump(v.id,v.product_name)">
						<image :src="v.preview_img" mode="aspectFit"></image>
					</view>
					<view class="sgoodsright">
						<view class="sgoodstext">{{v.product_name}}</view>
						<view class="gw95" v-if="v.is_user_member == 0">
							<text class="discount red">{{v.goods_price_msg}}</text>
						</view>
						<view class="gw95" v-else-if="v.is_user_member > 0">
							<text class="hyj" v-if="v.goods_price_msg">{{v.goods_price_msg}}</text>
						</view>
						<view class="gw95" v-if="v.ranking !=''">
							<text class="discount red">{{v.ranking}}</text>
						</view>
						<view class="sgoodsprice">
							<view class="sgoodspricetext">
								￥{{v.product_shop_price}}
							</view>
							
						</view>
						<view class="buy" @click="onGwc(v)">
							<image src="https://img-cdn.duobashuzi.com/xianggui/img/gwc_h.png" mode="scaleToFill"></image>
							<text class="num" v-if="v.mum">{{v.mum}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="zanwu" v-if="zanwu">暂无更多数据</view>
			<view id="recommend"  class="recommendli"  v-if="type != 1">
				<u-divider text="更多个性化推荐"></u-divider>
				<sheet-recommend :isType.sync="isType" ref="getXgjgoodlist"></sheet-recommend>
			</view>
			<side-bar isType="2"></side-bar>
		</block>
		<sheet-bottom ref="getSpecList" :isCart="isCart" @goodsId="jianting" :isSheet.sync="isSheet" :goodsInfo.sync="goodsInfo" @closeSheet="closeShee"></sheet-bottom>
		<!-- 侧边按钮 -->
		<!-- <view class="sideBar">
			<view class="home sideBar_item" @click="fangan">
				<image src="/static/fangan.png" mode="widthFix"></image>
			</view>
		</view> -->
	</view>

</template>

<script>
	import{allGoods,sceneList,searchHotKeyword,searchProductKeyword,clearSearchHistory} from '@/api/goodsList.js'
	import{topCate,getChildrenCateList,goodsDetail} from '@/api/index.js'
	import sheetRecommend from "@/components/sheet/sheetRecommend.vue"
	import sheetBottom from "@/components/sheet/sheetBottom.vue"
	import sideBar from "@/components/sheet/sideBar.vue"
	export default {
		data() {
			return {
				isCart:0,
				isSheet:false,
				type:0,
				isType:1,
				tabindex:1,
				isSearch:true,
				changeList: [
					{id:1,title: '综合',sort:1},
					{id:2,title: '销量',sellOut:1},
					{id:3,title: '价格',price:1,},
					{id:4,title: '上线',isNew :2,},
					{id:5,title: '',}
				],
				issColor:"#c0c0c0",
				isxColor:"#c0c0c0",
				priceSortOrder: '', 
				isGoodssort:true,
				searchHotlst:[],//热门搜索数据
				searchProductlst:[], //搜素历史记录数据
				issearchProductlst:false,
				zanwu:false,
				total:'',//总条数
				goodsList: [],
				page:1, //分页
				product_name:'', //商品名称
				sort:1,  //综合排序
				sellOut:'', //销量-排序1，
				isNew:"",//isNew1，
				price:'' //1  正序，2倒叙
			}
		},
		components: {
			sheetRecommend,
			sheetBottom,
			sideBar
		},
		watch: {
			"goodsInfo"(newVal, old) {
				console.log(newVal)
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type;
			if(this.type == 1){
				this.page = 1;
				this.goodsList = [];
				this.isSearch = false;
				this.getAllGoodst()
			}
			// this.getAllGoodst();
			this.getSearchHotKeyword();//热门搜索
			this.getsearchProductKeyword(); //搜素历史记录
			uni.$on('goodsId',function(res){
			  console.log(res)
			});
		},
		//滚动加载
		onReachBottom(){
			let _this = this;
			if (_this.total <= _this.goodsList.length) {
				this.zanwu = true;
				// uni.showToast({
				// 	title: '已加载全部数据',
				// 	icon: "none"
				// });
			} else {
				_this.page++;
				_this.getAllGoodst()
			}
		
		},
		methods: {
			//热门搜索
			getSearchHotKeyword(){
				searchHotKeyword({}).then(res => {
					console.log(res)
					this.searchHotlst = res.result;
					
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//搜素历史记录
			getsearchProductKeyword(){
				searchProductKeyword({}).then(res => {
					console.log(res)
					this.searchProductlst = res.result;
					this.issearchProductlst = this.searchProductlst.length > 0;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//清空搜素历史记录
			getclearSearchHistory(){
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认删除历史？',
					success: function (res) {
						if (res.confirm) {
							clearSearchHistory({}).then(e => {
								that.searchProductlst = [];
								that.issearchProductlst = that.searchProductlst.length > 0;
							}).catch(err => {
								uni.showToast({
									title: err.msg,
									icon: "none"
								})
							})
							
						} else if (res.cancel) {
							
						}
					}
				});
				
			},
			jump(id,title){
				uni.navigateTo({
					url: '/package/info/index?id='+ id +'&title='+title
				});
			},
			
			//点击价格的事件
			togglePriceSort() {
				this.tabindex = 3;
				
				if(this.priceSortOrder == ''){
					this.priceSortOrder = '1'
					this.price = this.priceSortOrder;
				}else{
					this.priceSortOrder = this.priceSortOrder === '1' ? '2' : '1'; // 切换升序/降序
					this.price = this.priceSortOrder;
				}
				this.sort = '';
				this.sellOut = '';
				this.isNew = '';
				this.getAllGoodst()
			},
			//顶部切换的事件
			changeStatus(e){
				this.priceSortOrder ='';
				if(e.id != 5){
					this.page = 1;
					this.goodsList = [];
					this.tabindex = e.id;
					if(e.id == 1){
						
						this.sort = e.sort;
						this.sellOut = '';
						this.isNew = '';
						this.price = '';
						
					}else if(e.id == 2){
						this.sort = '';
						this.sellOut = e.sellOut;
						this.isNew = '';
						this.price = '';
						
					}else if(e.id == 4){
						this.sort = '';
						this.sellOut = '';
						this.isNew = e.isNew;
						this.price = '';
					}
					this.getAllGoodst()
				}else{
					this.isGoodssort = !this.isGoodssort;
				}
				
			},
			//点击记录的搜索
			onSearchli(e){
				this.product_name = e;
				this.isSearch = false;
				this.onSearch();
			},
			//点击搜索
			onSearch(){
				let product_name = this.product_name;
				if(product_name == ''){
					this.type = 1;
					// uni.showToast({
					// 	title: '搜索关键词不能为空',
					// 	icon: "none"
					// })
					// return false;
				}
				this.page = 1;
				this.goodsList = [];
				this.isSearch = false;
				this.getAllGoodst()
			},
			//查询商品
			getAllGoodst() {
				
				this.zanwu = false;
				let data ={
					keywords:this.product_name, //商品名称
					sort:this.sort, //综合排序
					sellOut:this.sellOut, //销量
					isNew:this.isNew, //上新
					priceSort:this.price //价格
				};
				console.log(data)
				allGoods(data,this.page).then(res => {
					console.log(res.result.data.length)
					if(res.result.data.length == 0){
						this.zanwu = true;	
					}
					this.goodsList = this.goodsList.concat(res.result.data)
					this.total = res.result.total;
					this.$nextTick(()=>{
						this.$refs.getXgjgoodlist.getRecommendlist();
					})
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//监听加入购物车成功
			jianting(e){
				this.twolit.forEach((v,i)=>{
					if(v.id == e.id){
						
						v.mum = e.minimum_order_quantity;
					}
				});
			},
			//打开购买弹窗
			onGwc(e){
				console.log()
				goodsDetail({
					goods_id: e.id
				}).then(res => {
					console.log(res)
					this.isSheet = true;
					this.goodsInfo = res.result;
					if(this.goodsInfo.is_spec == 1){
						this.$nextTick(()=>{
							this.$refs.getSpecList.getgoodsSpecList();
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
				
				console.log(this.goodsInfo)
				// this.$set(e,"goods_num",0)
			},
			//关闭购物车
			closeShee(e){
				this.isSheet = e
			}
			
		}
	}
</script>

<style lang="scss">
	@import 'index.scss';
	.u-status-bar{
		display: none;
	}
</style>